<template>
    <div>
        <share-button :onClick="openDialog" btnText="打开弹窗"></share-button>
        <share-json-form-dialog 
            :visible="isOpen" 
            :setterFormValues="buildSetterForm" 
            :eval-util-map="{
                _fetchClass: fetchClass
            }" 
            :footer-actions="['first','next','ok','cancel']" 
            :onCancel="()=>isOpen = false"
            :onOk="submit" 
            :firstProps="buildFirstProps()" 
            :onFirst = "onFirst"
        ></share-json-form-dialog>
    </div>
</template>

<script>
import { ShareButton, ShareJsonFormDialog } from "../../packages/index";
// import { buildSetterForm } from "../useShareJsonForm/buildSetterForm"

function buildSetterForm(){
    return [
        {
            component:"Input",
            label:"姓名",
            name:"name",
            
        }, 
        {
            component: "Input",
            label: "年龄",
            name: "age",
            type:"number",
            min:0,
            max:130,
        },
        {
            component: "Select",
            label: "报警来源",
            name: "grade",
            dataSource:[
                { label: "部标终端", value: '1' },
                { label: "主动安全设备", value: '2' },
                { label: "聚集数据", value: '3' },
            ],
            onChange:{
                type:"js",
                expression:`
                    function(val){
                        field.setValue("class",undefined)
                    }
                `
            }
        },
        {
            component: "Select",
            label: "报警项",
            name: "class",
            cacheForUpdate:{
                type:"js",
                expression:`props.grade`
            },
            fetchData:{
                type:"js",
                expression:`function(){
                    return _fetchClass(props.grade)
                }`
            }
        }

    ]
}
export default {
    name:"JsonFormDialog",
    components: { ShareButton,ShareJsonFormDialog },
    data(){
        return {
            isOpen: false,
            firstDisable: true,
        }
    },
    computed:{
        buildSetterForm
    },
    methods:{
        buildFirstProps(){
            let btnWidth = this.isOpen? "200px":"100px"
            return {
                type: 'primary',
                btnText: '第一个按钮',
                plain: true,
                round: true,
                // disabled: this.firstDisable,
                size: 'large',
                style: {
                    width: btnWidth
                },
                // onClick:()=>{
                //     return this.onFirst()
                // }
            }
        },
        onFirst() {
            return new Promise((resolve)=>{
                setTimeout(()=>{
                    resolve(console.log('点击了第一个按钮'))
                },2000)
                
            })
            
        },
        openDialog(){
            this.isOpen = true
        },
        fetchClass(source){
            return new Promise((resolve) => {
                const list = [
                    {
                        source: '1',
                        children: [
                            { label: "左顾右盼", value: 11 },
                            { label: "疲劳驾驶", value: 1 },
                            { label: "打哈欠", value: 4 },
                            { label: "车距过近", value: 5 },
                        ]
                    },
                    {
                        source: '2',
                        children: [
                            { label: "车道偏离", value: 9 },
                            { label: "分神驾驶", value: 10 },
                            { label: "双手脱离方向盘", value: 13 },
                        ]
                    },
                    {
                        source: '0',
                        children: [
                            { label: "行驶时玩手机", value: 14 },
                            { label: "接打电话", value: 15 },
                            { label: "前向碰撞", value: 16 }
                        ]
                    },
                ]

                setTimeout(() => {
                    resolve(list.find(v => v.source == source)?.children)
                }, 500);
            })
        },
        submit(values){
            console.log('------')
            console.log("values:",values)
        }
    }
}
</script>

<style>

</style>